<template>
    <view class="page">
        <!-- 搜索 -->
        <view class="search-head">
            <!-- <view class="back" @click="onBack">
                <text></text>
            </view> -->
            <!-- <view class="search">
				<text class="iconfont icon-fadajing"></text>
				<input type="text" v-model="keyword" placeholder="搜索商品" />
			</view> -->
            <view class="search">
                <uni-search-bar cancelButton="none" bgColor="#80bebb" @confirm="onSearch" :focus="false" v-model="searchValue" @blur="blur" @input="input"
                    @cancel="cancel" @clear="clear">
                    <template v-slot:searchIcon>
                        <uni-icons color="#f2f2f2" size="24" type="search" />
                    </template>
                    <template v-slot:clearIcon>
                        <uni-icons color="#989898" size="24" type="close" />
                    </template>
                </uni-search-bar>
            </view>
            <view class="btn" @click="onSearch">
                <text>搜索</text>
            </view>
        </view>
        <!-- 搜索历史 -->
        <view class="search-record">
            <view class="search-title">
                <view class="title">搜索历史</view>
                <uni-icons color="#999" size="24" type="trash-filled" @click="onDelete" />
                <!-- <view class="iconfont icon-laji" ></view> -->
            </view>
            <view class="record-list" v-if='SearchRecordArr.length > 0'>
                <view class="list" v-for="(item,index) in SearchRecordArr" @click="onRecord(item)" :key="index">
                    <text>{{item}}</text>
                </view>
            </view>
            <view v-else class='search-end'>暂无搜索记录</view>
        </view>
        <!-- 搜索发现 -->
        <!-- <view class="search-found">
            <view class="search-title">
                <view class="title">热门搜索</view>
                <view class="iconfont icon-laji"></view>
            </view>
            <view class="found-list">
                <view class="list" v-for="(item,index) in hotsearchData" :key="index" @tap='toSearchList(item)'>
                    <text>{{item}}</text>
                </view>
            </view>
        </view> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            SearchRecordArr: [],
            keyword: '',
            searchValue: '',
            hotsearchData: ['测试', '后台', '创建']
        };
    },
    onShow() {
        if (uni.getStorageSync('SearchRecordArr')) {
            this.SearchRecordArr = JSON.parse(uni.getStorageSync('SearchRecordArr'));
        }
    },
    onLoad() {
        if (uni.getStorageSync('SearchRecordArr')) {
            this.SearchRecordArr = JSON.parse(uni.getStorageSync('SearchRecordArr'));
        }
    },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 搜索点击
         */
        onSearch() {
            if (!this.keyword) {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none',
                })
                return;
            }
            for (var i = 0; i < this.SearchRecordArr.length; i++) {
                if (this.SearchRecordArr[i] == this.keyword) {
                    this.SearchRecordArr.splice(i, 1);
                }
            }
            this.SearchRecordArr.unshift(this.keyword);
            uni.setStorageSync('SearchRecordArr', JSON.stringify(this.SearchRecordArr));
            uni.navigateTo({
                url: '/pagesA/index/searchGoodsList?keyword=' + encodeURIComponent(this.keyword),
            })
        },
        search(res) {
            // uni.showToast({
            //     title: '搜索：' + res.value,
            //     icon: 'none'
            // })
        },
        input(res) {
            this.keyword = res
            console.log('----input:', this.keyword)
        },
        clear(res) {
            // uni.showToast({
            //     title: 'clear事件，清除值为：' + res.value,
            //     icon: 'none'
            // })
        },
        blur(res) {
            // uni.showToast({
            //     title: 'blur事件，输入值为：' + res.value,
            //     icon: 'none'
            // })
        },
        cancel(res) {
            uni.showToast({
                title: '点击取消，输入值为：' + res.value,
                icon: 'none'
            })
        },
        /**
         * 记录点击
         */
        onRecord(val) {
            uni.navigateTo({
                url: '/pagesA/index/searchGoodsList?keyword=' + encodeURIComponent(val),
            })
        },

        onDelete() {
            uni.showModal({
                title: "提示",
                content: '是否要清除搜索记录',
                cancelText: '取消',
                confirmText: "确定",
                success: (res) => {
                    if (res.confirm) {
                        uni.removeStorageSync('SearchRecordArr');
                        this.SearchRecordArr = [];
                        this.onLoad();
                    }
                }
            })
        },
        //点击搜索记录进入页面
        toSearchList(item) {
            this.keyword = item
            this.onSearch();
            // uni.navigateTo({
            //     url: '/pagesA/index/searchGoodsList?keyword=' + encodeURIComponent(item),
            // })
        },
    }
}
</script>

<style scoped lang="scss">
/* 搜索 */
.search {
  /deep/.uni-searchbar {
    padding: 0;
    width: 690rpx;
    margin-top: 0 auto;
    color: #fff;
  }
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
}
/* 搜索 */
.search-head {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 100;
  /* #ifdef APP-PLUS||H5 */
  height: calc(200rpx + var(--status-bar-height));
  padding: calc(20rpx + var(--status-bar-height)) 25rpx 0;
  /* #endif */
  /* #ifdef MP */
  height: 100rpx;
  padding: 0 25rpx;
  /* #endif */
  // height: calc(240rpx + var(--status-bar-height));
  // padding-top: calc(80rpx + var(--status-bar-height));
  background: linear-gradient(to bottom, #2e996d, #4099ad);
  // .back {
  // 	display: flex;
  // 	justify-content: center;
  // 	align-items: center;
  // 	width: 10%;
  // 	height: 100%;
  // 	text {
  // 		width: 20rpx;
  // 		height: 20rpx;
  // 		border-left: 2rpx solid #fff;
  // 		border-bottom: 2rpx solid #fff;
  // 		transform: rotate(45deg);
  // 	}
  // }
  .search {
    /deep/.uni-searchbar {
      padding: 0;
      margin-top: 0 auto;
      color: #fff;
    }
  }
  .search {
    display: flex;
    align-items: center;
    width: 78%;
    height: 60rpx;
    padding: 0 2%;
    text {
      font-size: 34rpx;
      color: #c0c0c0;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    height: 100%;
    text {
      font-size: 28rpx;
      color: #fff;
    }
  }
}
/* 搜索记录 */
.search-record {
  padding: 30rpx 4%;
  margin-top: 100rpx;
  /* #ifdef APP-PLUS||H5 */
  margin-top: 200rpx;
  /* #endif */
  /* #ifdef MP */
  margin-top: 100rpx;
  /* #endif */
  // margin-top: calc(240rpx + var(--status-bar-height));
  // background-color: #FFFFFF;
  // border-bottom: 2rpx solid #f6f6f6;
  .search-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .title {
      font-size: 32rpx;
      color: #212121;
      font-weight: 600;
    }
    .iconfont {
      font-size: 38rpx;
    }
  }
  .record-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30rpx;
    .list {
      padding: 10rpx 36rpx;
      background-color: #efefef;
      display: inline-block;
      border-radius: 26rpx;
      margin: 15rpx;
      font-size: 28rpx;
      // padding: 10rpx 20rpx;
      // margin-right: 20rpx;
      text {
        color: #555555;
      }
    }
  }
  .search-end {
    text-align: center;
    font-size: 28rpx;
    padding: 30rpx;
  }
}
.search-found {
  padding: 0 4%;
  margin-top: 30rpx;
  background-color: #ffffff;
  .search-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30rpx;
    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #212121;
    }
    .iconfont {
      font-size: 38rpx;
    }
  }
  .found-list {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    .list {
      padding: 10rpx 36rpx;
      background-color: #efefef;
      display: inline-block;
      border-radius: 10rpx;
      margin: 15rpx;
      font-size: 28rpx;
      text {
        color: #555555;
        font-size: 26rpx;
      }
    }
  }
}
</style>